<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试DIV</title>
	</head>
	<body>
		<!--
		position:设置DIV的定位方式。
		position的属性中有static、fixed、relative、absolute四个属性。
		常用relative和absolute。
		若指定为static时，DIV遵循HTML规则；
		若指定为relative时，可以用top、left、right、bottom来设置DIV在页面中的偏移，但是此时不可使用层；
		若指定为absolute时，可以用top、left、right、bottom对DIV进行绝对定位；
		若指定为fixed时，在IE7与FF中DIV的位置相对于屏屏固定不变，IE6中没有效果(期待高手指点原因)；
		-->
		<div style="width:200px; height:200px;background-color:Black;">
			<div style="position:relative; top:10px;left:10px; width:140px; height:140px;background-color:White;">
			</div>
			<div style="position:absolute; top:60px;left:160px; background-color:red;width:100px;height:100px;">
			</div>
			<div style="position:fixed; top:210px;left:210px; background-color:green;width:100px;height:100px;">
			</div>
		</div>
		<div style="position:absolute; top:50px;left:50px; background-color:greenyellow;width:100px;height:100px;">
		</div>
		<div style="position:fixed; top:200px;left:200px; background-color:orange;width:100px;height:100px;">
		</div>
		<div style="position:static; top:200px;left:200px; background-color:white;width:100px;height:100px;">
		</div>
	</body>
</html>
